<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LM年会</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="css/bigKV.css">
</head>
<body>
<div class="content_body">
    <img src="image/bigTVlogo.png" class="bigTVlogo">
</div>

<!--一进入页面的二维码模态窗-->
<div class="mask">
    <div><img src="image/ma.png" class="ma animated fadeInDown"></div>
    <p class="goBtn wave  animated lightSpeedIn">GO!</p>
    <!--倒计时轮播图-->
    <div class="vform2 none">
        <div class="shenti1-1 show">
            <p class="number animated fadeInDown">5</p>
        </div>
        <div class="shenti1-1">
            <p class="number animated fadeInDown">4</p>
        </div>
        <div class="shenti1-1">
            <p class="number animated fadeInDown">3</p>
        </div>
        <div class="shenti1-1">
            <p class="number animated fadeInDown">2</p>
        </div>
        <div class="shenti1-1">
            <p class="number animated fadeInDown">1</p>
        </div>
    </div>
</div>

<div class="shiping none">
    <!--排行榜-->
    <div class="divBottom">
        <div class="blueDiv">
            <p>实时</p>
            <p>Top 50</p>
        </div>
        <ul class="listUl">
            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">50</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->
            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->
            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">41</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->
            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->
            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->
            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->
            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->
            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->
            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->
            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->

            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->
            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->
            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->
            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->
            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->
            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->
            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->
            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->
            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->
            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->

            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->
            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->
            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->
            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->
            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->
            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->
            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->
            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->
            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->
            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->

            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->
            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->
            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->
            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->
            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->
            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->
            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->
            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->
            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->
            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->

            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->
            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->
            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->
            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->
            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->
            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->
            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->
            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->
            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->
            <!--<li class="listLI animated lightSpeedIn">-->
                <!--<p class="num">1</p>-->
                <!--<img class="imgURl" src="image/ma.png">-->
            <!--</li>-->

        </ul>
    </div>

    <!--第一个视频-->
    <div class="videoRQ none">
        <!--<h1 style="color: wheat">1</h1>-->
        <!--muted="muted"  controls="controls" -->
        <video id="bgmusic" class="video animated fadeInUp" src="image/video1.mp4"
               type="video/mp4" preload="auto">
            <h1 style="color: yellow;width: 100%;text-align: center">你的浏览器不支持video播放</h1>
        </video>
    </div>
    <!--第二个大屏视频-->
    <div class="videoRQ2 none">
        <!--<h1 style="color: wheat">2</h1>-->
        <!--muted="muted"  controls="controls" -->
        <video id="bgmusic2" class="video2 animated fadeInUp" src="image/video2.mp4" type="video/mp4"
               preload="auto">
            <h1 style="color: yellow;width: 100%;text-align: center">你的浏览器不支持video播放</h1>
        </video>
    </div>
</div>




</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="layui/layui.js"></script>
<script src="js/rem.js"></script>
<script src="js/base_url.js"></script>
<script>
    var loadIndex,
        layer;

</script>
<script src="js/request.js"></script>
<script>
    // var time = 5;
    var key = true;
    var dingshiqi=0;
    var DSQ=0;
    layui.use('layer', function () {
        layer = layui.layer;
        $(function () {
            // 小视频播放
            let audioEl = document.getElementById('bgmusic');
            function forceSafariPlayAudio() {
                audioEl.load(); // iOS 9   还需要额外的 load 一下, 否则直接 play 无效
                audioEl.play(); // iOS 7/8 仅需要 play 一下
            }

            // 大视频播放
            let video = document.getElementById("bgmusic2");
            function forceSafariPlayAudio2() {
                video.load();
                video.play();
            }
            video.addEventListener('timeupdate', function () {
                //监听到大视频播放结束后
                if(video.currentTime>video.duration - 0){
                    video.pause();
                }
                $('.videoRQ').hide();
                // forceSafariPlayAudio2() //循环播放大视频
            }, false);

            if (key) {
                $(".goBtn").bind('click', function () {
                    /**摇一摇状态开启（Ajax）**/
                    layer.ready(function () {
                        loadIndex = layer.load();
                    });
                    var data1 = {"next_type":1};
                    myPost('/changeShakeType', data1, function (res) {
                        if (res.code === 200) {
                            // console.log(1);
                        }
                    });

                    $('.ma').hide();
                    $('.goBtn').hide();
                    $('.vform2').css({'display': 'block'});

                    /**触发shakeRankList（ajax）**/
                    layer.ready(function () {
                        loadIndex = layer.load();
                    });
                    DSQ=setInterval(function () {
                        var data = {};
                        myPost('/shakeRankList', data, function (res) {
                            if (res.code === 200) {
                                var dataList = res.data.rank_list || {};
                                // const dataList = Object.keys(dataObj).map((key) => dataObj[key]);

                                $('.listUl').empty();
                                dataList.forEach(function (val, i) {
                                    var list = `<li class="listLI">
                                                   <p class="num">${i + 1}</p>
                                                   <img class="imgURl" src="${val.avatar}">
                                                </li>`;

                                    $('.listUl').append(list);
                                });


                                $('.num').eq(0).css({'backgroundColor': 'yellow'});
                                $('.num').eq(1).css({'backgroundColor': 'pink'});
                                $('.num').eq(2).css({'backgroundColor': '#ab0d0b'});
                            }
                        });
                    },1000);

                    //倒计时
                    var index = 0;
                    dingshiqi = setInterval(function () {
                        if (index === 4) {
                            clearInterval(dingshiqi);
                            $('.mask').hide(400);
                            $('.shiping').show();
                            $('.videoRQ').show();
                            forceSafariPlayAudio();  //小视频播放
                            audioEl.addEventListener('ended', function () {
                                /**摇一摇状态关闭（Ajax）**/
                                layer.ready(function () {
                                    loadIndex = layer.load();
                                });
                                var data2 = {"next_type":2};
                                myPost('/changeShakeType', data2, function (res) {
                                    if (res.code === 200) {
                                        clearInterval(DSQ);
                                        // console.log(2);
                                    }
                                });
                                $('.divBottom').hide();
                                $('.videoRQ2').show();
                                forceSafariPlayAudio2();
                                $('.videoRQ').hide();
                            }, false);
                        } else {
                            index++
                        }
                        $('.vform2').find('.shenti1-1').eq(index).fadeIn().siblings('.shenti1-1').fadeOut();
                    }, 1000)
                });
                key = false
            }


        })
    });
</script>
</html>